<template>
    <div>
        <el-dialog
            v-if="dialogVisible"
            :title="title"
            :visible="dialogVisible"
            width="900px"
            top="10vh" 
            :close-on-click-modal="false"
            :before-close="dialogBeforeClose">
            <div>
                <el-form
                    ref="form"
                    :rules="rules"
                    inline
                    label-suffix=" :"
                    :model="formData"
                    style="margin-top:15px"
                    label-width="110px">
                    <el-form-item label="角色名称" prop="roleName">
                        <el-input v-model="formData.roleName" placeholder="请输入角色名称" class="ipt" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="权限">
                        <el-checkbox-group v-model="power" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="item in options" :label="item.menuName" :key="item.menuId" style="width: 100px;margin-left:50px;margin-top:20px">{{item.menuName}}</el-checkbox>
                        </el-checkbox-group>
                        <!-- <el-select
                            v-model="power" 
                            filterable
                            value-key="menuId"
                            clearable
                            multiple
                            placeholder="请选择权限">
                            <el-option
                                v-for="item in options"
                                :key="item.menuId"
                                :label="item.menuName"
                                :value="item.menuId">
                            </el-option>
                        </el-select> -->
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="formData.remark" placeholder="请输入备注" class="ipt" clearable></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer">
                <el-button @click="dialogBeforeClose" >取 消</el-button>
                <el-button type="primary" @click="ok" >确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: 'add-equipment',
        data () {
            return {
                power: [],
                checkAll: false,
                formData: {
                    roleName: '',
                    remark: ''
                },
                rules: {
                    roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
                },
                resolve: null,
                dialogVisible: false,
                title: '添加用户',
                type: 'add',
                roleOption: [],
                parkOption: [],
                options: []
            }
        },
        methods: {
            open (type,data) {
                this.getMenu()
                this.type = type
                this.title = type === 'addRole' ? '添加角色' : '编辑角色'
                this.formData = this._.cloneDeep(data ?? {})
                if(type === 'editRole') { 
                    for(let v of JSON.parse(data.powerJson ?? '[]')){
                        this.power.push(v.menuName)
                    }
                }
                // if(type === 'editRole'){ 
                //     const { powerJson } = data
                //     let obj = this._.cloneDeep(powerJson ?? '[]')
                //     this.power = JSON.parse(obj)
                // }
                this.dialogVisible = true
                return new Promise(resolve => {
                    this.resolve = resolve
                })
            },
            async getMenu(){
                try{ 
                    const { data : res } = await this.$api.Menu.getMenuList({})
                    if(res.code) return this.$message.error(res.msg)
                    this.options = res.result
                }catch(e){ 
                    console.log(e);
                }
            },
            dialogBeforeClose() {
                this.formData = {}
                this.dialogVisible = false
                this.power = []
            },
            handleCheckedCitiesChange(value) { 
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.options.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
            },
            handleCheckAllChange(val) {
                this.options = val ? this.options : [];
                this.isIndeterminate = false;
            },
            async ok () {
                this.$refs.form.validate(async val=> { 
                    if(!val) return false
                    let arr = []
                    for(let v of this.options){ 
                        for(let v1 of this.power){ 
                            if(v1 === v.menuName){ 
                                arr.push({menuName:v.menuName,herf:v.herf,menuId:v.menuId})
                            }
                        }
                    }
                    this.$delete(this.formData,'power')
                    const { data: res } = await this.$api.Role[this.type]({
                        ...this.formData,
                        powerJson: JSON.stringify(arr)
                    })
                    if (res.code !== 0) return this.$message.error(res.msg || '更新失败!')
                    this.$message.success(res.msg || '操作成功！')
                    this.dialogBeforeClose()
                    this.resolve()                    
                })
            },

        },
    }
</script>

<style scoped>
    .ipt {
        width: 280px;
    }
</style>